<template>
	<view class="beijingse" style="padding-top: 30rpx;">
		
		<view class="ffffff mainpadding">
			<view class="dingwei" @click="uploadImg">
				<view class="shilitu">
					<image :src="personInfo.avatar_text" mode=""></image>
				</view>
				<view class="shexj"></view>
			</view>
			<view class="margin_top flexbetween">
				<view class="titletext">昵称</view>
				<input class="textright" type="text" v-model="personInfo.nickname">
			</view>
			<view class=" margin_top2 flexbetween">
				<view class="titletext">选择地址</view>
				<view class="flexbetween xiahuaxian" @click="dkxzq">
					<input class="inputs1 textright" type="text" placeholder="选择省、市" v-model="address" :disabled="true">
					<view class="huiyoujt"></view>
				</view>
			</view>
		</view>
		<!-- 固定底部 -->
		<view class="gudingdb">
			<view class="bigbtn" @click="sure">确认修改</view>
		</view>
		<view class="">
			<u-picker :show="show" keyName="text" ref="uPicker" :columns="columns" @confirm="confirm"
				@change="changeHandler">
			</u-picker>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import citymsg from "../../static/city/city.js"
	// console.log(citymsg.data, "省市区信息")
	export default {
		data() {
			return {
				show: false,
				columns: [
					// ['中国', '美国'],
					// ['深圳', '厦门', '上海', '拉萨']
				],
				columnData: [
					// ['深圳', '厦门', '上海', '拉萨'],
					// ['得州', '华盛顿', '纽约', '阿拉斯加']
				],
				sheng: "", //省id
				shi: "", //市id
				address: "",
				citys: citymsg,
				personInfo: {
					avatar_text: "",
					nickname: ""
				},
				personInfo2: {
					avatar_text: "",
					nickname: ""
				}
			}
		},
		onLoad() {
			this.init()
			let arr = []
			let arr2 = []
			let arr3 = []
			this.citys.data.forEach((item, index) => {
				arr.push({
					pid: item.pid,
					text: item.text,
					value: item.value
				})
				arr3.push([])
				item.children.forEach((ite, inde) => {
					if (index == 0) {
						arr2.push({
							pid: ite.pid,
							text: ite.text,
							value: ite.value
						})
					}
					arr3[index].push({
						pid: ite.pid,
						text: ite.text,
						value: ite.value
					})
				})
			})
			this.columns.push(arr)
			this.columns.push(arr2)
			this.columnData = arr3
			// console.log(this.columns, "111")
			// console.log(this.columnData, "222")
		},
		methods: {
			confirm(e) {
				this.address = e.value[0].text + "/" + e.value[1].text
				this.sheng = e.value[0].value
				this.shi = e.value[1].value
				console.log('ahdfjsak', this.address)
				console.log('2356', e.value)
				this.show = false
			},
			dkxzq() {
				if(this.address == ""){
					this.show = true
				}else{
					httpRequest.toast("地址只能选择一次");
					return false 
				}
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}

			},
			init() {
				httpRequest.request('/api/user/index', 'POST', {}, false, false, true).then(res => {
					if (res.code == 1) {
						this.personInfo = res.data
						this.personInfo2 = res.data
						this.address=res.data.cityinfo
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			sure() {
				httpRequest.modal('提示', '确认修改', true, (res) => {
					if (res) {
						httpRequest.request('/api/user/editInfo', 'POST', {
							avatar: this.personInfo.avatar_text,
							nickname: this.personInfo.nickname,
							province_id: this.sheng, //省id
							city_id: this.shi, //市id
						}, false, false, true).then(res => {
							if (res.code == 1) {
								httpRequest.toast(res.msg)
								setTimeout(() => {
									uni.navigateBack(1)
								}, 1000)
							}
						}).catch(err => {
							httpRequest.toast(err.msg);
						})
					}
				})
			},
			// 头像
			uploadImg() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						console.log(res)
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(1, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i])
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(1, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									console.log(res[i])
									_this.uploadImageService(res[i])
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			// 详情转载
			uploadImageService(url) {
				let _this = this;
				httpRequest.uploadFile('/api/Common/upload', url).then(res => {
					console.log(res, "fanh")
					this.personInfo.avatar_text = res.fullurl
				}).catch(err => {});
			},
		}
	}
</script>
<style lang="scss" scoped>
	.flexbetween1 {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 10rpx 0;
	}

	.textright {
		text-align: right;
	}

	.shexj {
		width: 46.13rpx;
		height: 46.13rpx;
		position: absolute;
		right: 308rpx;
		top: 160rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/shexj.png');
	}

	.shilitu {
		width: 182rpx;
		height: 182rpx;
		margin: auto;
		border-radius: 50%;

		image {
			margin: auto;
			width: 182rpx;
			height: 182rpx;
			border-radius: 50%;
		}
	}
</style>
<style lang="scss" scoped>
	.xiahuaxian {
		width: 72%;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #F1F1F1;
	}

	.zdy {
		width: 100%;
	}

	.flexbetween1 {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 10rpx 0;
	}

	.inputs1 {
		width: 100%;
	}

	.inputs {
		width: 72%;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #F1F1F1;
	}

	/deep/.selected-item-active {
		border-bottom: 2px solid #ffc059;
	}
</style>
